<template>
<!--  <img :src="imageUrl" alt="" width="300">-->
  <el-tooltip content="点击查看大图" placement="top">
    <el-image
        :style="{width: '300px', height: '300px'}"
        :src="imageUrl"
        :zoom-rate="1.5"
        :max-scale="7"
        :min-scale="1"
        :preview-src-list="imageUrlList"
        :initial-index="0"
        fit="cover"
    />&nbsp;&nbsp;
  </el-tooltip>


</template>

<script lang="ts" setup>

import {onMounted, ref} from "vue";

let imageUrl = ref('')
let imageUrlList = ref([])

let props = defineProps({
  faceImage: {
    type: String,
    default: null
  },
  text:{
    type:Array<string>,
    default: null
  },
  rect: {
    x: {
      type: Number,
      default: null
    },
    y: {
      type: Number,
      default: null
    },
    w: {
      type: Number,
      default: null
    },
    h: {
      type: Number,
      default: null
    }
  }
})

onMounted(() => {
  const canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d')
  let image = new Image()
  image.src = props.faceImage
  canvas.width = image.width
  canvas.height = image.height
  image.onload = () => {
    ctx.drawImage(image, 0, 0, image.width, image.height)
    // 绘制矩形
    ctx.beginPath()
    ctx.lineWidth = "5"
    ctx.strokeStyle = "red"
    ctx.rect(props.rect.x, props.rect.y, props.rect.w, props.rect.h)
    ctx.stroke()
    // 绘制文字
    ctx.font = 'bold ' + 15 + 'px Arial';
    ctx.fillStyle = "red"
    for(let i = 0; i < props.text.length; i++){
      ctx.fillText(props.text[i], props.rect.x, props.rect.y-(10+15*i))
    }
    imageUrl.value = canvas.toDataURL()
    imageUrlList.value.push(imageUrl.value)
  }
})

</script>

<style scoped>

</style>
